<template>
  <div id="form">
    <!-- 图片容器 -->
    <div class="img_wrap">
      <img src="~/assets/img/auth/tx.jpg" alt="" />
    </div>
    <!-- 表单容器 -->
    <div class="form_wrap">
      <form action="#" @click="preventSubmit">
        <input type="text" placeholder="user" v-model="username" />
        <input type="password" placeholder="password" v-model="password" />

        <template v-if="!type">
          <button type="" @click="handleLogin">登录</button>
          <div class="text_wrap">
            <span @click="gotoRs">没有账号，去创建一个</span>
          </div>
        </template>
        <template v-else>
          <button type="submit" @click="handleReg">注册</button>
          <div class="text_wrap">
            <span @click="gotoLg">已有账号，直接登录</span>
          </div>
        </template>
      </form>
    </div>
  </div>
</template>

<script>
import { register, login } from "network/auth";
import { mapActions } from "vuex";
export default {
  name: "FormItem",
  props: {
    type: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  methods: {
    // 从注册页面跳转到登录页面
    gotoLg() {
      this.$emit("handleLogin");
    },
    // 从登录页面跳转到注册页面
    gotoRs() {
      this.$emit("handleRegister");
    },
    ...mapActions(["saveUserInfo"]),
    //点击登录
    handleLogin() {
      //发送网络请求
      login(this.username, this.password).then((res) => {
        // console.log(res);
        // 登录成功
        if (res.code === "success") {
          this.$toast("登录成功");
          // 跳转到个人中心页面并且将登录信息存放在store
          const user = {
            username: this.username,
            password: this.password,
          };
          // 将信息保存到store中
          this.saveUserInfo(user);
          this.$router.push("/profile");
        } else {
          this.$toast(res.message);
        }
      });
    },
    //点击注册
    handleReg() {
      //发送网络请求
      register(this.username, this.password).then((res) => {
        console.log(res);
        // 注册成功
        if (res.code === "success") {
          this.$toast("注册成功");
          // 跳转到登录页面
          this.gotoLg();
        } else if (res.message === "Request failed with status code 500") {
          this.$toast("请将信息填写完整");
        } else {
          this.$toast(res.message);
        }
      });
    },
    //阻止点击按钮刷新页面
    preventSubmit(e) {
      e.preventDefault();
    },
  },
  // 进来将页面输入框内容清空
  activated() {
    this.username = "";
    this.password = "";
  },
};
</script>

<style scoped>
#form {
  height: calc(100vh - 49px - 44px);
}
.img_wrap {
  padding-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img_wrap img {
  border-radius: 50%;
  width: 50%;
  height: 30%;
}

.form_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #6980a4a3;
  width: 80%;
  height: 200px;
}

form input {
  height: 40px;
  width: 70%;
  border-radius: 6px;
  padding-left: 10px;
  border: none;
}

form input,
button {
  margin-top: 20px;
}

button {
  width: 50%;
  background-color: #8098ee;
  color: aliceblue;
  height: 30px;
  border: 1px solid #8098ee;
  border-radius: 3px;
}

.text_wrap {
  margin-top: 20px;
  color: #00ff6a;
}
</style>